<!--
*Author：富行天下团队
 *Contact：283591387@qq.com
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/mall/Mall_distri_good.js此处编写
 -->
<template>
  <div style="background: white; margin-top: 15px">
    <el-tabs type="border-card" style="height: 400px">
      <el-tab-pane>
        <span slot="label"><i class="el-icon-date">商品信息</i> </span>
        <vol-table
          ref="tableList"
          :loadKey="true"
          :columns="columns"
          :pagination-hide="false"
          :height="300"
          :defaultLoadPage="false"
          @loadBefore="loadBefore"
          :endEditAfter="endEditAfter"
          url="/api/distriProducts/getDetailPage"
          :row-index="true"
          :columnIndex="true"
          :index="true"
          :click-edit="true"
          :ck="false"
        ></vol-table>
      </el-tab-pane>
      <!-- <el-tab-pane :lazy="true" label="套票明细"></el-tab-pane> -->
    </el-tabs>

    <vol-box
      :model.sync="model.box1"
      title="分享二维码"
      :height="400"
      :width="400"
      :padding="15"
    >
      <div style="padding: 0px 20px">
        <div class="demo-image__preview">
          <!-- <img :src="this.bigPoster" alt="" />  -->
          <!-- :preview-src-list="srcList" -->
          <el-image
            style="width: 300px; height: 300px;padding:50px"
            :src="this.bigPoster"
            id="qrcode"
          >
          </el-image>
        </div>
      </div>
      <div slot="footer">
        <Button type="default" @click="downloadClick">下载</Button>
        <Button type="default" @click="model.box1 = false">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";

import VolBox from "@/components/basic/VolBox.vue";
var vueParam = {
  components: {
    VolTable,
    VolBox
  },
  methods: {
    getRender() {
      return (h, { row, column, index }) => {
        return h("div", { style: {} }, [
          h(
            "a",
            {
              props: {},
              style: { "margin-left": "9px", "border-bottom": "1px solid" },
              on: {
                click: e => {
                  e.stopPropagation();
                  this.model.box1 = true;
                  this.goodId = row.id;
                  this.creatQrCode();

                  //将当前行设置为编辑行
                  // this.$refs.table.edit.rowIndex = index;
                }
              }
            },
            "查看分享码"
          )
        ]);
      };
    },
    creatQrCode() {
      //  this.http.get(`/api/Stores/WXcode?scene=spm=1.2.${this.goodId}.3&supplier=${this.distributionid}`,).then(reslut=>{
      this.bigPoster = `https://api.boss.i-town.cn/api/Stores/WXcode?scene=spm=1.2.${this.goodId}.3&supplier=${this.distributionid}`;
      //     this.srcList.push(reslut)
      //    if(reslut.status)
      //  {
      //    console.log(reslut,"reslut")
      //     this.url=reslut
      //     this.srcList.push(reslut)
      //  }
      // });
    },
    downloadIamge(imgsrc, name) {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据

        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = imgsrc;
    },
    // 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
    downloadClick(index) {
      // 主要是为了名字不重复
      var name = new Date().getTime();
      this.downloadIamge(this.bigPoster, `${name}`);
    },
    loadBefore(params, callback) {
      return callback(true);
    },
    endEditAfter(row) {
      //结束编辑时，可以直接调用后台的代码进行保存
      console.log(row);
      return true;
    },
    distributionTypes(val){
      if(val==2004||val==2006){
        this.columnsList(false)
      }else{
        this.columnsList(true)
      }
    },
    //动态获取操作
    columnsList(val){
      this.columns.forEach(element => {
        if(element.field=="操作"){
          element.hidden=val
        }
      });
    },
  },
  data() {
    return {
      model: { box1: false },
      tableData: [],
      url: "",
      bigPoster: "",
      srcList: [],
      goodId: "",
      distributionid: "1",
      distributorType:"",
      columns: [
        {
          field: "id",
          title: "主键",
          type: "string",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left"
        },
        //{field:'distri_productid',title:'产品创建id',type:'string',width:260,align:'left',sortable:true},
        {
          field: "spare2",
          title: "商品编码",
          type: "string",
          width: 260,
          align: "left"
        },
        {
          field: "spare1",
          title: "商品名称",
          type: "string",
          width: 260,
          align: "left"
        },
        //{field:'spare1',title:'商品编码',type:'string',width:260,align:'left'},
        {
          field: "offlineCode",
          title: "线下编码",
          type: "decimal",
          width: 110,
          align: "left"
        },
        {
          field: "sellingPrice",
          title: "门市价",
          type: "string",
          width: 110,
          align: "left"
        },
        {
          field: "preferentialPrice",
          title: "优惠价",
          type: "decimal",
          width: 90,
          align: "left"
        },
        {
          field: "vipPrice",
          title: "会员价",
          type: "string",
          width: 90,
          align: "left"
        },
        {
          field: "settlementPrice",
          title: "结算价",
          type: "string",
          width: 90,
          align: "left"
        },
        {
          field: "channelPrice",
          title: "渠道价",
          type: "string",
          width: 90,
          align: "left"
        },
        {
          field: "isAvailable",
          title: "是否可用",
          type: "string",
          bind: { key: "enable", data: [] },
          width: 110,
          align: "left"
        },
        {
          field: "modifier",
          title: "修改人",
          type: "string",
          width: 100,
          align: "left"
        },
        {
          field: "modifyDate",
          title: "修改时间",
          type: "datetime",
          width: 135,
          align: "left",
          sortable: true
        },
        //{field:'modifyID',title:'修改人ID',type:'int',width:90,hidden:true,align:'left'},
        {
          field: "createDate",
          title: "创建时间",
          type: "datetime",
          width: 135,
          align: "left",
          sortable: true
        },
        // {field:'createID',title:'创建人ID',type:'int',width:90,hidden:true,align:'left'},
        {
          field: "creator",
          title: "创建人",
          type: "string",
          width: 100,
          align: "left"
        },
        {
          field: "操作",
          title: "操作",
          width: 120,
          fixed: "right",
          hidden:false,
          render: this.getRender()
        }
      ]
    };
  },
  mounted() {
    this.creatQrCode();
  }
};
export default vueParam;
</script>
